define(["utils","base"],function(utils,baseClass){
    var Component = function(config){
        var _this = this;

        Component.baseConstructor.call(this,config);

        this.$el.addClass(" yy-icon");

        var font = this.config.font||"";
        var font_arr = font.split("_");
        this.text = this.config.text;
        var style = this.config.style;
        var iconStyle = this.config.iconStyle;
        var textStyle = this.config.textStyle;
        var iconClass = this.config.iconClass;
        var imgStyle = this.config.imgStyle;

        var textPos = this.config.textPos || "right";
        this.iconDom = null;
        this.textDom = null;


        var font_family,font_code;
        if(font_arr.length==2){
            font_family = font_arr[0];
            font_code = font_arr[1];
            this.iconDom = $('<i class="yy-icon-code" data-code="'+font_code+'" data-icon="&#x'+font_code+';"></i>');

            iconStyle = iconStyle||{};
            iconStyle.fontFamily = font_family;
            utils.css(this.iconDom,iconStyle);
            if(iconClass){
                this.iconDom.addClass(iconClass);
            }

        }
        var imgOnErrorMethodName = this.config.comKey +"_imgerror";
        var imgOnErrorMethod = this.pageview.plugin[imgOnErrorMethodName];

        if(this.config.src){


          this.iconDom = $('<div class="yy-icon-img"></div>');
          var img = new Image();
          img.src= this.config.src;
          img.onerror  = function(){
            if(imgOnErrorMethod){
              imgOnErrorMethod.call(_this.pageview.plugin,_this,{});
            }
          }
          this.iconDom.append(img);
          if(imgStyle){
              utils.css($(img),imgStyle);
          }
          if(iconStyle){
              utils.css(this.iconDom,iconStyle);
          }

        }else{
          if(imgOnErrorMethod){
            imgOnErrorMethod.call(_this.pageview.plugin,_this,{});
          }
        }


        if(this.text||this.text==0){
          this.text =(this.text===null||this.text===undefined||this.text==="")?config.defaultText: this.text;

          this.textDom = $("<span title='"+this.text+"' class='yy-icon-text yy-text-box'>"+(this.text)+"</span>");
          if(this.config.numberofline){
            this.textDom[0].style["-webkit-line-clamp"]=this.config.numberofline;
          }
          if(textStyle){
              utils.css(this.textDom,textStyle);
          }
        }

        if(textPos == "left" || textPos == "top"){
          this.textDom && this.$el.append(this.textDom);
          this.iconDom && this.$el.append(this.iconDom);
        }else{
          this.iconDom && this.$el.append(this.iconDom);
          this.textDom && this.$el.append(this.textDom);
        }

        if(this.iconDom){
          if(textPos == "left" || textPos == "right"){
            this.$el.addClass("yy-icon-h");
          }else{
            this.$el.addClass("yy-icon-v");
          }
        }

        this.originalStatus = {font:font,text:this.config.text};

    }

    utils.extendClass(Component,baseClass);

    Component.prototype.changeStatus = function(key){
      var statusInfo = this.originalStatus;
      if(key&&key!==""&&this.config.status){
        statusInfo = this.config.status[key] || this.originalStatus;
      }

      statusInfo.iconStyle = statusInfo.iconStyle||this.config.iconStyle;

      this.status = key;

      if(statusInfo.font){
        var font_arr = statusInfo.font.split("_");
        if(font_arr.length!=2){
          return;
        }
        var font_family = font_arr[0];
        var font_code = font_arr[1];
        var newDom = $('<i class="yy-icon-code" data-code="'+font_code+'" data-icon="&#x'+font_code+';"></i>');
        utils.css(newDom,{fontFamily:font_family});
        this.iconDom.replaceWith(newDom);
        this.iconDom = newDom;
        if(statusInfo.iconStyle){
            utils.css(this.iconDom,statusInfo.iconStyle);
        }
      }

      var text = statusInfo.text||"";
      this.setText(text);

    };

    Component.prototype.setFont = function(iconCode,style){
      this.setIcon(iconCode,style);
    }
    Component.prototype.setIcon = function (iconCode,style) {
      var font_arr =iconCode.split("_");
      if(font_arr.length!=2){
          return;
      }
      var font_family = font_arr[0];
      var font_code = font_arr[1];
      var newDom = $('<i class="yy-icon-code" data-code="'+font_code+'" data-icon="&#x'+font_code+';"></i>');
      utils.css(newDom,{fontFamily:font_family});
      this.iconDom.replaceWith(newDom);
      this.iconDom = newDom;
      this.config.iconStyle = this.config.iconStyle||{};
      var iconStyle = utils.clone(this.config.iconStyle);
      if(style){
          for(var key in style){
              iconStyle[key] = style[key];
          }
      }
      utils.css(this.iconDom,iconStyle);

    };

    Component.prototype.setIconClass = function (iconClass,style) {
      var newDom = $('<i class="yy-icon-code"></i>');
      newDom.addClass(iconClass);
      this.iconDom.replaceWith(newDom);
      this.iconDom = newDom;
      this.config.iconStyle = this.config.iconStyle||{};
      var iconStyle = utils.clone(this.config.iconStyle);
      if(style){
          for(var key in style){
              iconStyle[key] = style[key];
          }
      }
      utils.css(this.iconDom,iconStyle);

    };

    Component.prototype.setText = function(text){
      this.text = text;
       this.textDom&&this.textDom.html(text);
    };
    Component.prototype.getText = function(text){
      return  this.text;
    }
    Component.prototype.setAttribute = function(attr,val){
      this.$el.attr(attr,val);
      this.textDom && this.textDom.attr(attr,val);
      this.iconDom && this.iconDom.attr(attr,val);
    }



    return Component;
});
